
<template>
<div class="homewave">
    <div class="left">
        <div class="left_content">
            <div class="content">
                <div class="pie" id="pie1"></div>
            </div>
        </div>
    </div>
    <div class="right">
        <div class="right_card">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>相关信息</span>
              </div>
              <div v-for="(o,index) in list" :key="index" class="text item">
                {{'内容 ' + index }}:  <span class="informationcontent">{{o.name}}</span> 
              </div>
             </el-card>
        </div>
        <div class="right_card">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>时间差</span>
              </div>
              <div v-for="(o,index) in list2" :key="index" class="text item">
                {{'内容 ' + index }}:  <span class="informationcontent">{{o.name}}</span> 
              </div>
             </el-card>
        </div>
        <div class="right_card">
            <el-input type="textarea" v-model="data.information" :rows="5"  show-word-limit style="width: 100%" ></el-input>
        </div>
        <div class="right_card">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>说明</span>
                </div>
                <div>
                    <el-input type="textarea" v-model="data.information" :rows="3"  show-word-limit style="width: 100%" class="right_card"></el-input>
                    <el-button type="primary" plain>确认</el-button>
                </div>
             </el-card>
        </div>
        <div>
                <el-button  type="primary">上一个</el-button>
                <el-button  type="success">下一个</el-button>
                <el-button type="warning" plain>滤波</el-button>
        </div>
    </div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  data () {
    return {
        data:{
            information:'',
        },
      list:[{name:'12131313'},{name:'2021-11-11'},{name:'212-1刀闸'},{name:'通道1'},{name:'通道2'},{name:'通道3'},{name:'通道4'}],
      list2:[{name:'12131313'},{name:'2021-11-11'},{name:'212-1刀闸'},{name:'通道1'},{name:'通道2'},{name:'通道3'},{name:'通道4'}]
    }
  },
  mounted(){
    this.getPie1();
  },
  methods:{
    getPie1(){
      var echart = document.getElementById("pie1");
      var myChart = echarts.init(echart);
      var option;
      
      option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
          }
        ]
      };
      
      option && myChart.setOption(option);

    },

  }
}
</script>
<style scoped>
  .homewave {
    width: 100%;
    height: 1080px;
    background-color: #fff;
    padding: 3px 8px;
    display: flex;
  }
  .left{
    width: 70%;
    height: 82%;
  }
  .left_content{
    width: 100%;
    height: 100%;
    overflow:hidden;
  }
  .right{
    width: 29%;
    height: 82%;
    margin-left: 1%;
    background-color: cadetblue;
    padding: 8px;
  }
 .left_content  .content {
    height: 100%;
    border: 1px solid;
    padding: 5px 20px;
  }
  .pie {
    width: 100%;
    height: 100%;
  }
.informationcontent{
    padding-left: 20px;
}
.right_card{
    margin-bottom: 10px;
}
.homewave /deep/ .el-card__header{
    padding: 7px 20px !important;
    font-weight: 600;
}
</style>